<template>
  <div id="main">
      <mt-header  title="黑马程序员-Vue项目"></mt-header>
      <div class="container">
        <div class="item" v-for="(item,index) in dataList" :key="index">
          <div class="item-left">
            <MySwitch :flag="item.select" @update="updateSelect" :index="index"/>
          </div>
          <div class="item-right">
            <div class="img">
              <img height="100%" width="100%"  :src="item.img" alt="">
            </div>
            <div class="produce">
              <div class="produce-top">{{item.title}}</div>
              <div class="produce-bottom">
                <span class="price">￥{{item.price}}</span>
                <InputBtn @countNum="countNum" :num="item.countNum" :title="item.title"/>
                <span class="del" @click="dataList.splice(index,1)" >删除</span>
              </div>
            </div>
          </div>
        </div>

        <div class="money">
          <div class="left">
            <div class="left-top">总计(不含运费)</div>
            <div class="left-bottom">
              <span>已勾选商品 {{allNum}}件 , 总价</span>  
              <span class="all-price">￥{{allPrice}}</span>
            </div>
          </div>
          <div class="right">
            <mt-button @click="bill" type="danger">去结算</mt-button>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
import InputBtn from '../components/InputBtn/InputBtn.vue'
import MySwitch from '../components/MySwitch/MySwitch.vue'
export default {
  components: { InputBtn, MySwitch },
  data(){
    return {
      value:true,
      dataList:[
        {
          select:true,
          img:'../../static/img/apple.jpg',
          title:'华为(HUAWEI)荣耀6Puls 16G双4G版1',
          price:1000,
          countNum:1
        },
        {
          select:false,
          img:'../../static/img/apple.jpg',
          title:'华为(HUAWEI)荣耀6Puls 16G双4G版2',
          price:1100,
          countNum:2
        },
        {
          select:true,
          img:'../../static/img/apple.jpg',
          title:'华为(HUAWEI)荣耀6Puls 16G双4G版3',
          price:1000,
          countNum:3
        },
        {
          select:false,
          img:'../../static/img/apple.jpg',
          title:'华为(HUAWEI)荣耀6Puls 16G双4G版4',
          price:2000,
          countNum:4
        },
        {
          select:true,
          img:'../../static/img/apple.jpg',
          title:'华为(HUAWEI)荣耀6Puls 16G双4G版5',
          price:3000,
          countNum:5
        }
      ]
    }
  },
  methods:{
    updateSelect(obj){
      let {newValue,currentIndex } = obj 
      let item = this.dataList[currentIndex]
      item.select = newValue
      this.dataList.splice(currentIndex,1,item)
    },
    countNum(obj){
      let {currentNum,currenTtitle } = obj 
      this.dataList = this.dataList.filter((item,index)=>{
        if ( item.title === currenTtitle){
          item.countNum = currentNum
        }
        return true
      })
    },
    del(index){
      this.dataList.splice(index,1)
    },
    bill(){
      Toast('没钱，留下来洗碗')
    }
  },
  computed:{
    allNum(){
      let num = 0
      this.dataList.forEach(item=>{
        if (item.select){
          num+= item.countNum
        }
      })
      return num
    },
    allPrice(){
      let price = 0
      this.dataList.forEach(item=>{
        if (item.select){
          price+= item.price * item.countNum
        }
      })
      return price
    }
  }
  
}
</script>

<style scoped>
#main{
    height: 92vh;
    background: #eee;
}
.item{
  display: flex;
  justify-content: space-between;
  background: white;
  margin: 10px;
  padding: 10px;
}
.item-left{
  margin: auto;
}
.item-right{
  display: flex;
  justify-content: space-between;
}
.img{
  width: 60px;
  height: 50px;
}
.produce{
  text-align: left;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}
.produce-top{
  font-size: 12px;
  font-weight: 700;
}
.produce-bottom{
  display: flex;
  justify-content: space-between;
}
.price{
  color: red;
  font-size: 12px;
}
.del{
  color: cornflowerblue;
  font-size: 12px;
}

.money{
  margin: 10px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  text-align: left;
  font-size: 14px;
  color: #999;
  background: white;
}
.all-price{
  color: red;
  font-size: 14px;
}
</style>